lab components / Text

Title Url

Displays the title and URL of a page. The title acts as a clickable link to the page.

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { TitleUrl } from "@siteimprove/fancylab";

#Examples

TitleUrl provides a clear and concise way to present the title and URL of a page, aiding navigation and enhancing user understanding of link destinations.

Page titlewww.siteimprove.com

CodeHTML output

<TitleUrl
	title="Page title"
	titleFallback={
		<Tooltip
			variant={{ type: "text" }}
			content={"The page title field is either empty or unknown."}
		>
			No page title
		</Tooltip>
	}
	url="www.siteimprove.com"
	link="https://www.siteimprove.com" // usually link to the page report
/>

#Properties

Page titlewww.siteimprove.com

CodePropsHTML output

Property	Description	Defined
urlRequired	`string`Value for the link	YesNo
linkOptional	`string`Value rendered as the link text in the breadcrumb	YesNo
titleOptional	`string`Value for the page title	YesNo
titleFallbackOptional	`element`Value for the page title not found / no data	YesNo
searchQueryOptional	`object`Value for the query	YesNo
styleOptional	`object`Style CSSProperties values	YesNo
overflowOptional	`"ellipsis" \| "wrap"`Overflow properties	YesNo
displayModeOptional	`"both" \| "title" \| "url"`Should the component display only the title, only the url or both	YesNo
titleClassNameOptional	`string`Classname for title display	YesNo
urlClassNameOptional	`string`Classname for url display	YesNo
urlDataObserveKeyOptional	`string`data observe key for URL	YesNo
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
data-componentOptional	`string`Name of the component. Should only be set by components since it needs to stable. Used to track component usage	YesNo
tabIndexOptional	`number`Tab index of the outermost HTML element of the component	YesNo
onKeyDownOptional	`function`Callback for onKeyDown event	YesNo
onMouseDownOptional	`function`Callback for onMouseDown event	YesNo
onMouseEnterOptional	`function`Callback for onMouseEnter event	YesNo
onMouseLeaveOptional	`function`Callback for onMouseLeave event	YesNo
onFocusOptional	`function`Callback for onFocus event	YesNo
onBlurOptional	`function`Callback for onBlur event	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo

#Guidelines

#Best practices

#General

Use TitleUrl when

The page title and URL are both important for user comprehension.
The URL itself offers useful information (e.g., indicating a page title).

#Placement

TitleUrl is typically used in the following places:

Table / List Table : TitleUrl is often used to present a page's title (in a larger font) and its URL (in a smaller font). This is common in sections like Accessibility > Issue details.

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your TitleUrl to existing components for visual consistency.
Hierarchy:
- The title should be the most visually prominent element, usually in a larger font size and with the appropriate link styling (underline).
- The URL should be displayed below the title in a smaller font size with $color--text--static--body design token.
Clarity:
- Use sufficient color contrast between the title, URL, and background to ensure readability.
- Follow established typography guidelines for font choices, weights, and line heights.
- If the URL is excessively long, truncate it for display using an ellipsis ("…"). On hover, reveal the full URL in a tooltip or similar mechanism.

#Do not use when

The URL is excessively long, complex, or contains sensitive information.
The title alone provides enough context for the link's destination.
In very constrained spaces where a simpler text link is more appropriate. Use Link instead.

#Accessibility

#For designers

Ensure sufficient color contrast, clear focus states, and intuitive interactions.

#For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

Title:
- Write concise, descriptive titles that accurately reflect the linked page's content.
- Avoid generic phrases like "Click here."
URL:Ensure the URL is accurate, and up-to-date.